import React from 'react'
import PropTypes from 'prop-types'
import {Modal, Table} from 'antd'
import classnames from 'classnames'
import {DropOption} from 'components'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './LinkTable.less'

const {confirm} = Modal

const LinkTable = ({
                     onDeleteItem, isMotion, location, ...tableProps
                   }) => {
  const handleMenuClick = (record, e) => {
    //编辑
    if (e.key === "1") {
      tableProps.onEditItem(record)
    } else if (e.key === "2") {
      confirm({
        title: '是否删除当前项？',
        onOk () {
          onDeleteItem({guid: record.guid})
        },

      })
    }
  }
  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  const columns = [
    {
      title: '链接标题', dataIndex: 'linkTitle', key: 'linkTitle',
      render: text => <a href="">{text}</a>,
    },
    // {title: '链接地址', dataIndex: 'linkUrl', key: 'linkUrl'},
    {title: '图片地址', dataIndex: 'linkImg', key: 'linkImg'},
    {title: '排序号', dataIndex: 'orderIndex', key: 'orderIndex'},
    {
      title: '链接类型', dataIndex: 'linkType', key: 'linkType',
      render: text => {
        if (text === '0') {
          text = '图片链接'
        } else if (text === '1') {
          text = '文字链接'
        } else if (text === '2') {
          text = '图片和文字链接'
        } else if (text === '3') {
          text = '下载链接'
        }
        return <span>{text}</span>
      },
    },
    {
      title: '操作',
      key: 'linkOperation',
      width: 100,
      fixed: 'right',
      render: (text, record) => {
        return (<DropOption onMenuClick={e => handleMenuClick(record, e)}
                            menuOptions={[{key: '1', name: '编辑'}, {key: '2', name: '删除'}]} />)
      },
    },
  ]

  return (
    <Table
      //dataSource = {data}
      {...tableProps}
      columns={columns}
      className={classnames(styles.table, {[styles.motion]: false})}

      bordered={true}
      showHeader={true}
      rowKey={record => record.guid}
      components={{
        body: {wrapper: CommonBody},
      }}
    />
  )
}
LinkTable.propTypes = {
  onDeleteItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,

}

export default LinkTable
